import { ref, computed, watch, nextTick } from 'vue';

// 单词状态枚举
export const WORD_STATUS = {
  NORMAL: 0, // 灰色，默认状态
  KNOWN: 1,  // 绿色，认识
  FUZZY: 2,  // 黄色，模糊
  UNKNOWN: 3 // 红色，不认识
};

/**
 * 单词高亮处理的组合式API
 * @param {Object} options - 配置选项
 * @returns {Object} - 单词高亮相关的方法和数据
 */
export default function useWordHighlight(options = {}) {
  // 单词列表
  const wordList = ref([]);
  
  // 单词状态映射 (word -> status)
  const wordStatusMap = ref(new Map());
  
  // 变形词映射表，保存原词与变形词的关系
  const wordVariationsMap = ref(options.wordVariationsMap || {});
  
  // 是否激活高亮
  const isHighlightActive = ref(options.isHighlightActive !== undefined ? options.isHighlightActive : true);
  
  // 高亮渲染完成标志
  const renderComplete = ref(false);
  
  /**
   * 根据状态获取对应的CSS类名
   * @param {Number} status - 单词状态
   * @returns {String} - 对应的CSS类名
   */
  const getWordClass = (status) => {
    switch (status) {
      case WORD_STATUS.KNOWN: return 'word-known';
      case WORD_STATUS.FUZZY: return 'word-fuzzy';
      case WORD_STATUS.UNKNOWN: return 'word-unknown';
      case WORD_STATUS.NORMAL:
      default: return 'word-normal';
    }
  };

  /**
   * 获取单词所有形式（原词和变形词）
   * @param {String} word - 单词
   * @returns {Array} - 所有形式的单词数组
   */
  const getWordForms = (word) => {
    if (!word) return [word];
    
    const wordLower = word.toLowerCase();
    const wordForms = new Set([wordLower]);
    
    // 检查是否是原词
    if (wordVariationsMap.value[wordLower]) {
      // 添加所有变形词
      wordVariationsMap.value[wordLower].forEach(form => {
        if (form) wordForms.add(form.toLowerCase());
      });
      return Array.from(wordForms);
    }
    
    // 检查是否是某个原词的变形词
    for (const [originalWord, variations] of Object.entries(wordVariationsMap.value)) {
      if (!variations || !Array.isArray(variations)) continue;
      
      // 检查当前单词是否在变形列表中
      if (variations.some(v => v && v.toLowerCase() === wordLower)) {
        // 添加原词
        wordForms.add(originalWord.toLowerCase());
        
        // 添加所有变形词
        variations.forEach(form => {
          if (form) wordForms.add(form.toLowerCase());
        });
        
        break; // 找到后不需要继续查找
      }
    }
    
    return Array.from(wordForms);
  };
  
  /**
   * 更新单词状态映射
   */
  const updateWordStatusMap = () => {
    const map = new Map();
    wordList.value.forEach(word => {
      // 默认为灰色状态(NORMAL)
      let status = WORD_STATUS.NORMAL;
      
      try {
        // 安全地获取状态值，避免undefined或null引用
        if (word.study_status && typeof word.study_status.status === 'number') {
          // 使用study_status.status作为真实字段，确保是有效数字
          status = word.study_status.status;
        } else if (typeof word.status === 'number') {
          // 备用：如果没有study_status.status但有word.status
          status = word.status;
        }
        
        // 确保status是有效的枚举值(0-3)，否则默认为NORMAL(0)
        if (status < 0 || status > 3 || isNaN(status)) {
          status = WORD_STATUS.NORMAL;
        }
      } catch (error) {
        // 出现任何错误，默认为灰色状态
        console.error('获取单词状态时出错:', error);
        status = WORD_STATUS.NORMAL;
      }
      
      // 将单词所有形式都添加到映射中
      const content = word.content.toLowerCase();
      const allForms = getWordForms(content);
      
      allForms.forEach(form => {
        map.set(form, status);
      });
    });
    wordStatusMap.value = map;
  };
  
  /**
   * 更新单词列表
   * @param {Array} newWords - 新的单词列表
   */
  const updateWordList = (newWords) => {
    if (!Array.isArray(newWords)) return;
    
    // 确保每个单词都有正确的状态结构
    wordList.value = newWords.map(word => {
      // 默认为灰色状态(NORMAL)
      let status = WORD_STATUS.NORMAL;
      
      try {
        // 从study_status中获取状态信息
        if (word.study_status) {
          // 如果有status字段且是有效数字，直接使用
          if (typeof word.study_status.status === 'number' && 
              word.study_status.status >= 0 && 
              word.study_status.status <= 3) {
            status = word.study_status.status;
          } 
          // 否则根据quality判断
          else if (typeof word.study_status.quality === 'number') {
            if (word.study_status.quality >= 5) {
              status = WORD_STATUS.KNOWN;
            } else if (word.study_status.quality >= 3) {
              status = WORD_STATUS.FUZZY;
            } else if (word.study_status.quality > 0) {
              status = WORD_STATUS.UNKNOWN;
            }
            // quality为0或无效时保持NORMAL状态
          }
        }
      } catch (error) {
        console.error('处理单词状态时出错:', error);
        status = WORD_STATUS.NORMAL; // 出错时默认为灰色
      }
      
      // 确保study_status对象存在
      const studyStatus = word.study_status || {};
      
      return {
        id: word.id || `word-${Math.random().toString(36).substring(2, 10)}`,
        content: word.content || word.word || '',
        status: status, // 使用处理后的状态
        study_status: {
          ...studyStatus,
          status: status // 确保study_status.status与status一致
        },
        trans: word.trans || [],
        usphone: word.usphone || '',
        ukphone: word.ukphone || ''
      };
    });
    
    // 更新状态映射
    nextTick(() => {
      updateWordStatusMap();
    });
  };
  
  /**
   * 更新单词状态
   * @param {String} wordContent - 单词内容
   * @param {Number} newStatus - 新状态
   * @returns {Object} - 更新后的单词对象
   */
  const updateWordStatus = (wordContent, newStatus) => {
    // 确保状态值有效
    if (newStatus < 0 || newStatus > 3 || isNaN(newStatus)) {
      newStatus = WORD_STATUS.NORMAL;
    }
    
    // 获取单词所有形式
    const allForms = getWordForms(wordContent);
    let updatedWordItem = null;
    
    // 查找原词对象
    allForms.forEach(form => {
      const wordItem = wordList.value.find(item => 
        item.content.toLowerCase() === form.toLowerCase()
      );
      
      if (wordItem) {
        // 获取当前状态，优先使用study_status.status
        const currentStatus = wordItem.study_status?.status !== undefined ? 
                              wordItem.study_status.status : 
                              wordItem.status;
        
        // 只有状态发生变化时才更新
        if (currentStatus !== newStatus) {
          // 同时更新两个字段，确保数据一致性
          wordItem.status = newStatus;
          
          // 确保study_status对象存在
          if (!wordItem.study_status) {
            wordItem.study_status = {
              id: wordItem.id, // 使用单词ID作为study_status ID
              status: newStatus
            };
          } else {
            // 更新study_status.status字段
            wordItem.study_status.status = newStatus;
          }
          
          // 记录更新的单词对象（优先使用原词对象，如果找不到则使用第一个变形词对象）
          if (!updatedWordItem || form === wordContent.toLowerCase()) {
            updatedWordItem = wordItem;
          }
        }
      }
    });
    
    // 更新所有形式在状态映射中的状态
    allForms.forEach(form => {
      wordStatusMap.value.set(form, newStatus);
      updateWordElementClasses(form, newStatus);
    });
    
    return updatedWordItem;
  };
  
  /**
   * 更新DOM中单词元素的类名
   * @param {String} word - 单词内容
   * @param {Number} status - 新状态
   */
  const updateWordElementClasses = (word, status) => {
    // 使用nextTick确保DOM已更新
    nextTick(() => {
      const elements = document.querySelectorAll(`[data-word="${word.toLowerCase()}"]`);
      elements.forEach(el => {
        // 移除所有状态类
        el.classList.remove('word-normal', 'word-known', 'word-fuzzy', 'word-unknown');
        
        // 添加新的状态类
        el.classList.add(getWordClass(status));
      });
    });
  };
  
  /**
   * 获取单词状态
   * @param {String} wordContent - 单词内容
   * @returns {Number} - 单词状态
   */
  const getWordStatus = (wordContent) => {
    if (!wordContent) return WORD_STATUS.NORMAL;
    
    // 检查直接映射
    const directStatus = wordStatusMap.value.get(wordContent.toLowerCase());
    if (directStatus !== undefined) {
      return directStatus;
    }
    
    // 检查是否是变形词
    const allForms = getWordForms(wordContent);
    for (const form of allForms) {
      const status = wordStatusMap.value.get(form.toLowerCase());
      if (status !== undefined) {
        return status;
      }
    }
    
    return WORD_STATUS.NORMAL;
  };
  
  /**
   * 获取单词的翻译
   * @param {String} wordContent - 单词内容
   * @returns {String} - 单词翻译
   */
  const getWordTranslation = (wordContent) => {
    if (!wordContent) return '';
    
    // 查找原词
    const allForms = getWordForms(wordContent);
    let translation = '';
    
    // 优先查找原词的翻译
    for (const form of allForms) {
      const wordObj = wordList.value.find(w => 
        w.content.toLowerCase() === form.toLowerCase()
      );
      
      if (wordObj && wordObj.trans && wordObj.trans.length > 0) {
        if (wordObj.trans[0].tran_cn) {
          translation = wordObj.trans[0].tran_cn;
          break;
        }
        if (wordObj.trans[0].pos && wordObj.trans[0].tran) {
          translation = `${wordObj.trans[0].pos}. ${wordObj.trans[0].tran}`;
          break;
        }
        translation = wordObj.trans[0].tran || '';
        break;
      }
    }
    
    return translation;
  };
  
  /**
   * 高亮段落中的单词
   * @param {String} paragraph - 段落文本
   * @returns {String} - 处理后的HTML
   */
  const highlightParagraph = (paragraph) => {
    // 如果高亮功能未激活或没有单词，直接返回原文本
    if (!isHighlightActive.value || !paragraph || wordList.value.length === 0) {
      return paragraph;
    }
    
    try {
      // 创建要高亮的单词列表（包括变形词）
      const wordsToHighlight = new Set();
      
      // 添加所有单词和它们的变形到高亮列表
      wordList.value.forEach(word => {
        const allForms = getWordForms(word.content);
        allForms.forEach(form => wordsToHighlight.add(form.toLowerCase()));
      });
      
      // 转换为数组
      const words = Array.from(wordsToHighlight);
      
      // 构建一个安全的正则表达式，转义特殊字符
      const escapedWords = words.map(word => 
        word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
      );
      
      // 使用单词边界确保完整匹配单词
      const wordPattern = new RegExp(`\\b(${escapedWords.join('|')})\\b`, 'gi');
      
      // 替换单词为带有高亮样式的HTML
      let highlightedParagraph = paragraph.replace(wordPattern, (match) => {
        // 从映射中获取状态，如果不存在则使用默认灰色状态
        const status = getWordStatus(match);
        const className = getWordClass(status);
        
        // 获取词义
        const translation = getWordTranslation(match);
        
        // 使用自定义属性存储单词和翻译，但不在这里处理hover效果
        return `<span class="vocab-word ${className}" data-word="${match.toLowerCase()}" data-translation="${translation}">${match}</span>`;
      });
      
      return highlightedParagraph;
    } catch (error) {
      console.error('高亮单词时出错:', error);
      return paragraph;
    }
  };
  
  /**
   * 处理单词点击事件
   * @param {Event} event - 点击事件对象
   * @returns {Object|null} - 包含单词和新状态的对象，如果不是单词点击则返回null
   */
  const handleWordClick = (event) => {
    // 检查是否点击了单词元素
    if (event.target.classList.contains('vocab-word')) {
      const word = event.target.getAttribute('data-word');
      
      // 获取当前状态
      const currentElement = event.target;
      let newStatus = WORD_STATUS.NORMAL; // 默认为灰色
      
      // 根据当前样式判断状态并设置下一个状态
      if (currentElement.classList.contains('word-normal')) {
        newStatus = WORD_STATUS.KNOWN; // 灰色 -> 绿色
      } else if (currentElement.classList.contains('word-known')) {
        newStatus = WORD_STATUS.FUZZY; // 绿色 -> 黄色
      } else if (currentElement.classList.contains('word-fuzzy')) {
        newStatus = WORD_STATUS.UNKNOWN; // 黄色 -> 红色
      } else if (currentElement.classList.contains('word-unknown')) {
        newStatus = WORD_STATUS.NORMAL; // 红色 -> 灰色
      }
      
      // 更新单词状态
      updateWordStatus(word, newStatus);
      
      // 返回单词和新状态
      return { word, status: newStatus };
    }
    
    return null;
  };
  
  /**
   * 应用高亮到所有段落
   * @param {Array} paragraphs - 段落数组
   * @returns {Array} - 处理后的HTML数组
   */
  const highlightParagraphs = computed(() => {
    if (!Array.isArray(wordList.value) || wordList.value.length === 0) {
      return [];
    }
    
    // 确保状态映射已更新
    if (wordStatusMap.value.size === 0) {
      updateWordStatusMap();
    }
    
    // 标记渲染完成
    renderComplete.value = true;
    
    // 返回高亮处理后的段落数组
    return options.paragraphs?.map(highlightParagraph) || [];
  });
  
  // 初始化
  if (options.words) {
    updateWordList(options.words);
  }
  
  // 监听变形词映射变化
  watch(() => options.wordVariationsMap, (newMap) => {
    if (newMap) {
      wordVariationsMap.value = newMap;
      // 更新状态映射
      updateWordStatusMap();
    }
  }, { deep: true });
  
  // 监听段落变化，确保重新渲染
  if (options.paragraphs) {
    watch(() => options.paragraphs, () => {
      renderComplete.value = false;
      nextTick(() => {
        renderComplete.value = true;
      });
    }, { deep: true });
  }
  
  // 监听单词列表变化，更新状态映射
  watch(() => wordList.value, () => {
    nextTick(() => {
      updateWordStatusMap();
    });
  }, { deep: true });
  
  return {
    wordList,
    wordStatusMap,
    wordVariationsMap,
    isHighlightActive,
    renderComplete,
    getWordClass,
    getWordStatus,
    getWordTranslation,
    getWordForms,
    updateWordList,
    updateWordStatus,
    highlightParagraph,
    highlightParagraphs,
    handleWordClick,
    WORD_STATUS
  };
} 